<template>
  <div class="templates-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">模板中心</span>
          <el-input
            v-model="searchText"
            placeholder="搜索模板..."
            style="width: 300px"
            clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </template>

      <!-- 分类标签 -->
      <div class="category-tabs">
        <el-tag
          v-for="category in categories"
          :key="category.value"
          :type="selectedCategory === category.value ? 'primary' : 'info'"
          class="category-tag"
          @click="selectedCategory = category.value"
        >
          {{ category.label }}
        </el-tag>
      </div>

      <!-- 模板列表 -->
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="8" v-for="template in filteredTemplates" :key="template.id">
          <el-card class="template-card" shadow="hover">
            <div class="template-cover">
              <img :src="template.cover" alt="template cover" />
              <div class="template-overlay">
                <el-button type="primary" @click="handleUseTemplate(template)">
                  使用模板
                </el-button>
                <el-button @click="handlePreview(template)">
                  预览
                </el-button>
              </div>
            </div>
            <div class="template-info">
              <h3>{{ template.name }}</h3>
              <p class="template-desc">{{ template.description }}</p>
              <div class="template-meta">
                <el-tag size="small" type="success">{{ template.category }}</el-tag>
                <span class="template-stats">
                  <el-icon><View /></el-icon>
                  {{ template.views }}
                </span>
                <span class="template-stats">
                  <el-icon><Download /></el-icon>
                  {{ template.downloads }}
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { Search, View, Download } from '@element-plus/icons-vue'

const router = useRouter()

const searchText = ref('')
const selectedCategory = ref('all')

const categories = [
  { label: '全部', value: 'all' },
  { label: '表单模板', value: 'form' },
  { label: '页面模板', value: 'page' },
  { label: '流程模板', value: 'flow' },
  { label: '应用模板', value: 'app' }
]

const templates = ref([
  {
    id: 1,
    name: '员工信息表单',
    description: '包含员工基本信息、联系方式、入职信息等字段的完整表单',
    category: '表单模板',
    cover: 'https://via.placeholder.com/400x300/409EFF/FFFFFF?text=Employee+Form',
    views: 1234,
    downloads: 456,
    type: 'form'
  },
  {
    id: 2,
    name: 'CRUD列表页面',
    description: '标准的数据列表页面，包含搜索、新增、编辑、删除等功能',
    category: '页面模板',
    cover: 'https://via.placeholder.com/400x300/67C23A/FFFFFF?text=CRUD+Page',
    views: 2345,
    downloads: 789,
    type: 'page'
  },
  {
    id: 3,
    name: '请假审批流程',
    description: '完整的请假申请审批流程，包含申请、审批、归档等节点',
    category: '流程模板',
    cover: 'https://via.placeholder.com/400x300/E6A23C/FFFFFF?text=Leave+Flow',
    views: 876,
    downloads: 234,
    type: 'flow'
  },
  {
    id: 4,
    name: 'CRM系统模板',
    description: '客户关系管理系统完整模板，包含客户、销售、合同等模块',
    category: '应用模板',
    cover: 'https://via.placeholder.com/400x300/F56C6C/FFFFFF?text=CRM+App',
    views: 3456,
    downloads: 1234,
    type: 'app'
  },
  {
    id: 5,
    name: '报销申请表单',
    description: '企业报销申请表单，支持多种费用类型和附件上传',
    category: '表单模板',
    cover: 'https://via.placeholder.com/400x300/909399/FFFFFF?text=Expense+Form',
    views: 987,
    downloads: 321,
    type: 'form'
  },
  {
    id: 6,
    name: '数据分析仪表板',
    description: '数据可视化仪表板页面，包含图表、统计卡片等组件',
    category: '页面模板',
    cover: 'https://via.placeholder.com/400x300/5470C6/FFFFFF?text=Dashboard',
    views: 1567,
    downloads: 567,
    type: 'page'
  }
])

const filteredTemplates = computed(() => {
  let result = templates.value

  // 按分类筛选
  if (selectedCategory.value !== 'all') {
    const categoryMap = {
      form: '表单模板',
      page: '页面模板',
      flow: '流程模板',
      app: '应用模板'
    }
    result = result.filter(t => t.category === categoryMap[selectedCategory.value])
  }

  // 按搜索文本筛选
  if (searchText.value) {
    const text = searchText.value.toLowerCase()
    result = result.filter(t => 
      t.name.toLowerCase().includes(text) || 
      t.description.toLowerCase().includes(text)
    )
  }

  return result
})

const handleUseTemplate = (template) => {
  ElMessage.success(`正在使用模板: ${template.name}`)
  
  // 根据模板类型跳转到对应的设计器
  const routeMap = {
    form: '/lowcode/form-designer',
    page: '/lowcode/page-designer',
    flow: '/lowcode/flow-designer',
    app: '/lowcode/applications'
  }
  
  setTimeout(() => {
    router.push({ path: routeMap[template.type], query: { template: template.id } })
  }, 500)
}

const handlePreview = (template) => {
  ElMessage.info('预览功能开发中')
}
</script>

<style scoped>
.templates-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.category-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.category-tag {
  cursor: pointer;
  padding: 8px 16px;
  font-size: 14px;
}

.template-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.template-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.template-cover {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  margin: -20px -20px 15px -20px;
}

.template-cover img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.template-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}

.template-card:hover .template-overlay {
  opacity: 1;
}

.template-info h3 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 16px;
}

.template-desc {
  color: #606266;
  font-size: 14px;
  margin: 0 0 15px 0;
  min-height: 40px;
}

.template-meta {
  display: flex;
  align-items: center;
  gap: 15px;
}

.template-stats {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #909399;
  font-size: 13px;
}
</style>

